import { View, Text, Block, Input, Image } from '@tarojs/components';
import { BaseComponent } from '@common/components/base-component';
import { AtActionSheet, AtActionSheetItem } from "taro-ui"
import './media.scss'
import style from './index.module.scss'


interface CProps {
    selectMedia?: boolean,
    close: Function,
    title?: string,
    platform?:any,
}
interface CState {
}

export default class PanelMedia extends BaseComponent<CProps, CState> {
    constructor(props) {
        super(props);
    }
    componentDidMount() { }


    render() {

        const { selectMedia, title } = this.props
        const closeSelect = (item) => {
            this.props.close(item)
        }
        return (
            <>
                <View className={style.con}>
                    <View className='action-con'>
                        <AtActionSheet isOpened={selectMedia}>
                            <View className={style.text}>{title || '选择平台'}</View>
                            {
                                this.props.platform?.map(item => {
                                    return (
                                        <AtActionSheetItem key={item} onClick={() => closeSelect(item)}>
                                            <View className={style.panel}>
                                                <Image src={item.image} />
                                            </View>
                                            <View>
                                                <View className={style.btn}>{item.name}</View>
                                                {
                                                    item.key === 'wb' && <View className={`${style.btn} ${style.added}`}>已添加</View>
                                                }
                                            </View>
                                        </AtActionSheetItem>
                                    )
                                })
                            }
                        </AtActionSheet>

                    </View>

                </View>
            </>

        )
    }
}
